<template>
  <div class="changePassword">
    <van-nav-bar title="修改登录密码" left-arrow @click-left="onClickLeft" />
    <div style="padding: 16px">
      <van-form @submit="onSubmit">
        <van-field v-model="phone" readonly />
        <van-field
          required
          v-model="smsCaptchaResult"
          center
          clearable
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              slot="button"
              size="small"
              type="primary"
              v-if="!countDown"
              native-type="button"
              @click="sendVerifyCode"
              >发送验证码</van-button
            >
            <van-button
              :disabled="true"
              slot="button"
              size="small"
              type="primary"
              v-else
              >已发送{{ countDown }}s</van-button
            >
          </template>
        </van-field>

        <van-field
          v-model="password"
          required
          type="password"
          name="密码"
          placeholder="请输入密码(5-20位)"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="conpassword"
          required
          type="password"
          name="确认密码"
          placeholder="请输入密码确认密码(5-20位)"
        />
        <div style="margin: 16px 0">
          <van-button block type="info" native-type="submit">提交</van-button>
        </div>
        <div style="margin: 16px 0">
          <van-button
            block
            native-type="button"
            @click="() => $router.push('/personCenter')"
            >取消</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
  
<script>
export default {
  computed: {
    userInfo() {
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo) {
        return JSON.parse(userInfo);
      }
      return {};
    },
  },
  data() {
    return {
      isSuccess: false,
      smsUuid: "",
      smsCaptchaResult: "",
      uuid: "",
      codeUrl: "",
      phone: localStorage.getItem("username"),
      conpassword: "",
      countDown: 0, // 倒计时
      password: "",
    };
  },
  methods: {
    onSuccess() {
      this.isSuccess = true;
    },
    onClickLeft() {
      this.$router.push("/personCenter");
    },
    // 4.获取手机验证码
    async sendVerifyCode() {
      const params = {
        uuid: this.uuid,
      };
      // 4.2 获取短信验证码
      this.$post("/customer/updatePwdOfSms", params)
        .then((res) => {
          if (res && res.code * 1 === 200) {
            this.smsUuid = res.data;
            this.$toast({
              message: "短信发送成功",
              duration: 800,
            });
            this.countDown = 60;
            this.timeIntervalID = setInterval(() => {
              this.countDown--;
              // 4.1 如果减到0 则清除定时器
              if (this.countDown == 0) {
                clearInterval(this.timeIntervalID);
              }
            }, 1000);
          } else {
            //
          }
        })
        .catch(() => {
          //
        });
    },
    async onSubmit() {
      if (this.smsCaptchaResult.length < 1) {
        this.$toast({
          message: "请输入短信验证码",
          duration: 800,
        });
        return;
      }
      if (
        this.password.length < 5 ||
        this.password.length > 21 ||
        this.conpassword.length < 5 ||
        this.conpassword.length > 20
      ) {
        this.$toast({
          message: "密码为5-20位字符",
          duration: 800,
        });
        return;
      }
      if (this.password !== this.conpassword) {
        this.$toast({
          message: "两次输入的密码不一致",
          duration: 800,
        });
        return;
      }
      // 6.1 请求后台登录接口
      const params = {
        password: this.password,
        code: this.smsCaptchaResult,
        conpassword: this.conpassword,
        uuid: this.smsUuid,
      };
      this.$post("/customer/updatePwd", params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.$toast({
            message: "密码修改成功",
            duration: 800,
          });
          this.onClickLeft();
        }
      });
    },
  },
  mounted() {
  },
};
</script>
<style scoped lang="less">
.changePassword {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}
.login-code {
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
